<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
			
        <script src="../../../src/base.js">
        </script>
        <script src="../../../src/lang/Function.js">
        </script>
        <script src="../../../src/fx/Base.js">
        </script>
        <script src="../../../src/fx/Opacity.js">
        </script>
        <script src="../../../src/fx/Width.js">
        </script>
        <script src="../../../src/fx/Height.js">
        </script>
        <script src="../../../src/fx/Styles.js">
        </script>
        <script src="../../../src/fx/Style.js">
        </script>
        <script src="../../../src/fx/Scroll.js">
        </script>

        <style>
        	
			#demos {width:1000px;}
        	
			.boxes {

			}
			
			.box{ 
			
				width: 150px;
                height: 150px;
				position:relative; 
			}
			
			.float {float:left; margin:20px;}
			
            #box1 {
                background-color: #CCAA88;
            }
            
            #box2 {
                background-color: #CCBB88;
            }
            
            #box3 {
                background-color: #CCCC88;
            }
            
            #box4 {
                background-color: #CCDD88;
            }
			
			#box5 {
                background-color: #CCEE88;
            }
			
			
			#box6 {
                background-color: #CCAA88;
            }
            
            #box7 {
                background-color: #CCBB88;
            }
            
            #box8 {
                background-color: #CCCC88;
            }
            
            #box9 {
                background-color: #CCDD88;
            }
			
			#box10 {
                background-color: #CCEE88;
            }
			
        </style>
    </head>
    <body onload="">
    	<div id="demos">
    	<div class="boxes">
	        <div id="box1" class="box float">
	        </div>
	        <div id="box2" class="box float">
	        </div>
	        <div id="box3" class="box float">
	        </div>
	        <div id="box4" class="box float">
        	</div>
			<div id="box5" class="box float">
        	</div>
		</div>
		
        <div class="boxes">
            <input type="button" onClick="heightHide();" value="height" />
			<input type="button" onClick="widthHide();" value="width" />
			<input type="button" onClick="opacity();" value="opacity" />
			<input type="button" onClick="hide();" value="Hide" />
			<input type="button" onClick="scroll();" value="Scroll" />
        </div>	
		
		<!--//分割线-->
		
		<div class="boxes">
	        <div id="box6" class="box float">
	        </div>
	        <div id="box7" class="box float">
	        </div>
	        <div id="box8" class="box float">
	        </div>
	        <div id="box9" class="box float">
        	</div>
	        <div id="box10" class="box float">
        	</div>
		</div>
		
        <div class="boxes">
            <input type="button" onClick="verticalMove();" value="verticalMove" />
			<input type="button" onClick="horizontalMove();" value="horizontalMove" />
			<input type="button" onClick="move();" value="Move" />
        </div>	
		
		</div>
		
		<script>
			var Opacity=san.require("fx.Opacity");
			var Width=san.require("fx.Width");
			var Height=san.require("fx.Height");
			var Styles=san.require("fx.Styles");
			var Style=san.require("fx.Style");
			var Scroll=san.require("fx.Scroll");

		</script>		
        <script>
            
            function heightHide(){
                var box1 = document.getElementById('box1');
                var fx = new Height(box1);
                fx.toggle();
            }
            
            function widthHide(){
                var box2 = document.getElementById('box2');
                var fx = new Width(box2);
                fx.toggle();
            }
            
            function opacity(){
                var box3 = document.getElementById('box3');
                var fx = new Opacity(box3);
                fx.toggle();
            }
            
            function hide(){
                var el = document.getElementById('box4');
                var fx = new Styles(el);
                fx.custom({
                    height: [el.offsetHeight, 0],
                    width: [el.offsetWidth, 0]
                });
            }
            
            function scroll(){
                var el = document.getElementById('box5');
                var fx = new Scroll(el);
                fx.custom(el.scrollTop, el.scrollTop+400);
            }
			
			//设置top left时，position 必须不为static
			function verticalMove(){
				var el = document.getElementById('box6');
                var fx = new Styles(el);
                var fx = new Style(el,"top");
				fx.custom(el.offsetHeight,el.offsetHeight+500);			
				
			}
			//设置top left时，position 必须不为static
			function horizontalMove(){
				var el = document.getElementById('box7');
				
                var fx = new Style(el,"left");
				fx.custom(el.offsetWidth,el.offsetWidth+500);
 			
			}
			//设置top left时，position 必须不为static
			function move(){
				var el = document.getElementById('box8');
                var fx = new Styles(el);
                fx.custom({
                    top: [el.offsetHeight, el.offsetHeight+500],
					left: [el.offsetWidth, el.offsetWidth+500]
                });				
				
			}
		</script>
    </body>
</html>
